<template>
    <h2>首页</h2>
    <button @click="countjia">计数 + 1</button>
    <button @click="changShow">显示/隐藏</button>
    <ul>
        <li v-for="(value, index) in list" :key="index">
            {{ index }} - {{ value }}
        </li>
    </ul>
    <h3 v-if="isShow">当前计数：{{count}}</h3>

</template>

<script setup>
    import {ref, watch, onMounted} from 'vue'

    const count = ref(0)
    const isShow = ref(true)
    const list = ['Vue指令', 'ref响应式', '路由跳转']
    function countjia(){
        count.value += 1
    }
    function changShow(){
        isShow.value = !isShow.value
    }
    onMounted(() => {
        // 页面挂载完成后执行，打印信息到控制台
        console.log('页面挂载完成')
    })
    watch([count],([newcount],[oldcount]) => {
        if(newcount !== oldcount){
            console.log("计数变化：旧值->",{oldcount},"新值->",{newcount})
        }
    })

</script>